import React, { Component } from "react";



// 当项目中使用React Router时， 一般会根据路由信息将项目代码分片， 每个路由依赖的代码单独打包成一个chunk文件。
// asyncComponent接收一个函数参数importComponent，
// importComponent内通过import()语法动态导入模块。
// 在AsyncComponent被挂载后， importComponent就会被调用， 进而触发动态导入模块的动作

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);
      this.state = {
        component: null  // 动态加载的组件
      };
    }

    componentDidMount() {
      importComponent().then((mod) => {
        this.setState({
          // 同时兼容ES6和CommonJS的模块
          component: mod.default ? mod.default : mod
        });
      });
    }

    render() {
      // 渲染动态加载的组件
      const C = this.state.component;
      return C ? <C {...this.props} /> : null;
    }
  }

  return AsyncComponent;
}